<template>
    <div class="bac-container-none-padding user-tag-container">
        <div class="bac-container-title">我的标签</div>
        <el-form label-position="top" size="small" v-loading="loading">
            <el-form-item>
                <el-tag :key="tag" v-for="tag in tagList" closable :disable-transitions="false"
                        @close="handleTagClose(tag)" type="info">{{tag}}
                </el-tag>
            </el-form-item>
            <el-form-item>
                <el-input class="input-new-tag" v-model="tagInputValue"
                          ref="saveTagInput" @keyup.enter.native="handleTagInputConfirm"
                          @blur="handleTagInputConfirm">
                </el-input>
                <el-button class="button-new-tag" @click="showTagInput" :plain="true" :loading="addLoading">+ 添加
                </el-button>
                <div class="form-item-describe">最多添加5个标签</div>
            </el-form-item>
            <el-form-item label="热门标签">
                <el-tag :key="tag" v-for="tag in hotTagList" type="info" @click="addInput(tag)" style="cursor: pointer">{{tag}}
                </el-tag>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    export default {
        data: function () {
            return {
                tagList: [],
                hotTagList: [],
                tagInputValue: '',
                loading: false,
                addLoading: false
            }
        },
        methods: {
            showTagInput() {
                this.$nextTick(_ => {
                    this.$refs.saveTagInput.$refs.input.focus();
                });
            },

            handleTagInputConfirm() {
                let inputValue = this.tagInputValue;
                if (inputValue) {
                    this.addLoading = true;
                    this.$post("/user/tag/add", {tag: inputValue}).then((res) => {
                        if (res.code == 0) {
                            this.tagList.push(inputValue);
                        }
                        this.tagInputValue = '';
                        this.addLoading = false;
                    }).catch(() => {
                        this.addLoading = false;
                    });
                }

            },
            handleTagClose(tag) {
                this.loading = true;
                this.$post("/user/tag/delete", {tag: tag}).then((res) => {
                    if (res.code == 0) {
                        this.tagList.splice(this.tagList.indexOf(tag), 1);
                    }
                    this.loading = false;
                }).catch(() => {
                    this.loading = false;
                });

            },
            getData() {
                this.loading = true;
                this.$post("/user/tag/queryByUser").then((res) => {
                    console.log(res)
                    this.tagList = res.data;
                    this.loading = false;
                }).catch(() => {
                    this.loading = false;
                });
            },
            getHotTagList() {
                this.loading = true;
                this.$post("/user/tag/queryHotTagList").then((res) => {

                    this.hotTagList = res.data;
                    this.loading = false;
                }).catch(() => {
                    this.loading = false;
                });
            },
            addInput(tag){
                this.tagInputValue = tag;
                this.$refs.saveTagInput.focus();
            }


        },
        mounted() {
            this.getData();
            this.getHotTagList();
        }
    }
</script>
<style>
    .user-tag-container .el-tag {
        margin-right: 10px;
        margin-bottom: 5px;
    }

    .user-tag-container .input-new-tag {
        width: 220px;
        vertical-align: bottom;
    }

    .user-tag-container .el-form--label-top .el-form-item__label {
        padding: 0;
    }

</style>